<script setup lang="ts">

</script>

<template>
    <ul class="recommand">
        <li>
            <img src="./images/clock.png" alt="">
            <div class="title">今日推荐</div>
        </li>
        <li><img src="./images/today01.png" alt=""></li>
        <li><img src="./images/today02.png" alt=""></li>
        <li><img src="./images/today03.png" alt=""></li>
        <li><img src="./images/today04.png" alt=""></li>
    </ul>
</template>

<style scoped lang="less">
@import "@/styles/mixins.less";
@import "@/styles/common.less";
@import "@/styles/extends.less";

.recommand {
    margin-top: 10px;
    padding: 0 @main-padding;
    .flex-row-between(@flag: false);

    li {
        height: 165px;
        flex-grow: 1;
        &:first-child {
            width: 15%;
            .horizontal-vertical-center(false);
            background-color: @bg-color-gray1;
        }
        &:not(:first-child){
            img{
                width: 100%;
                height: 100%;
            }
        }
        .title{
            margin-top: 10px;
            font-weight: bold;
            font-size: @middle-max-size;
            color: @font-white;
        }

    }
}
</style>